﻿@use "../variables" as *;

.svd-simulator {
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-sizing: content-box;
  transform-origin: 0 0;
  top: 50%;
  left: 50%;
  transform: scale(1.26) translate(-50%, -50%);

  border: var(--ctr-preview-device-frame-border-width, var(--sjs-stroke-x2)) solid
    var(--ctr-preview-device-frame-border-color, var(--sjs-border-25, #d4d4d4ff));
  background: var(--ctr-preview-device-frame-background-color, var(--sjs-layer-3-background-500, #f4f4f4ff));
}

.svd-simulator-wrapper {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border-radius: var(--ctr-preview-device-corner-radius, var(--sjs-corner-radius-x4));
  box-shadow:
    0px 2px 6px 0px rgba(0, 0, 0, 0.1),
    0px 8px 16px 0px var(--ctr-preview-device-shadow-2-color, var(--sjs-special-glow, #004c441a));
  border: var(--ctr-preview-device-border-width, var(--sjs-stroke-x4)) solid
    var(--ctr-preview-device-border-color, var(--sjs-layer-3-background-500, #f4f4f4ff));
  background: var(--ctr-preview-device-background-color, var(--sjs-layer-1-background-500, #ffffffff));
  box-sizing: content-box;
}

.svd-simulator-main {
  min-height: 100%;

  &.svd-simulator-main--desktop {
    min-height: auto;

    &.svd-simulator-main--running {
      height: 100%;
    }
  }

  &.svd-simulator-main--frame {
    display: flex;
    align-items: center;
  }

  &:not(.svd-simulator-main--frame) {
    background-color: transparent;
  }

  .sd-root-modern {
    min-height: 100%;

    span {
      -moz-user-select: text;
      -webkit-user-select: text;
      -ms-user-select: text;
      user-select: text;
    }

    .sv-popup--menu-popup {
      width: auto;
      right: 0;
    }
  }
}

.svd-simulator-content {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
}
